<template>
  <el-scrollbar style="height: 100%;">
    <div class="loop-chain">
      <div class="lc-list">
        <div class="row-3" v-for="(v,i) in loopArray" :key="i">
          <div class="list-item" @click="selectTheItem(v)" v-for="(vv,ii) in v.item" :key="ii">
            <div class="line"
                 :style="{'display':
              ((ii === 2 && i%2 === 0) || (ii === 0 && i%2 !== 0 ) ||
               (ii < 2 && i%2 === 0 && i > 0 && ii===(endLoopArrLen-1)) ||
               (loopArrLen===1 && ii < 2 && ii===(endLoopArrLen-1))) ? 'none' : 'block'}">
            </div>
            <div class="main">
              <div class="title">{{vv.name}}</div>
              <div class="main-info">
                <div class="main-li" v-for="vvv in vv.children" :key="vvv.key" >
                  <span class="ml-pre">{{vvv.key}}:</span>
                  <span>{{vvv.value}}</span>
                </div>
              </div>
            </div>
            <span v-if="i===0 && ii===0" class="start-flag">
              <img src="./img/Start.png" alt="">
            </span>
            <span v-if="i===(loopArrLen-1) && ii===(endLoopArrLen-1)" class="end-flag" :class="[i%2===0?'end-right':'end-left']">
              <img src="./img/End.png" alt="">
            </span>
          </div>
          <span class="turn-icon turn-right" v-if="i%2===0 && i!==(loopArrLen-1)"></span>
          <span class="turn-icon turn-left" v-if="i%2!==0 && i!==(loopArrLen-1)" ></span>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script>
import * as common from './common.js'
export default {
	props: {
		res: {
			type: Array,
			default() {
				return [
				]
			}
		}
	},
	data () {
		return {
			data: []
		}
	},
	computed: {
		loopArray() {
			// 二维三元数组
			return common.sliceArray(this.res, 3)
		},
		loopArrLen() {
			return this.loopArray.length
		},
		endLoopArrLen() {
			return this.loopArray[(this.loopArray.length-1)].item.length
		}
	},
	created() {
	},
	methods: {
		selectTheItem(v) {
			this.$emit('getTheChainItem', v)
		}
	}
}
</script>

<style scoped lang="scss">
  .loop-chain{
    width: 700px;
    height: 316px; // 315 + 1 解决滚动条bug
    /*background: #e8ebfb;*/
    .lc-list{
      // width: 100%;
      margin: 0 auto;
      width: 684px;
      height: 310px;
      padding: 48px;
      box-sizing: border-box;
      position: relative;
      display: flex;
      flex-flow: row wrap;
      .row-3:nth-child(2n) {
        flex-flow: row-reverse wrap;
        .list-item{
          margin-right: 44px;
          .line{
            transform: scale(0.5,0.5) rotate(180deg);
            left: 140px;
          }
        }
        .list-item:first-child{
          margin-right: 7px;
          .line{
            display: none;
          }
        }
      }
      .row-3:nth-child(2n+1) {
        .list-item{
          margin-right: 44px;
          .line{
            background: url('./img/lr-arrow.png') no-repeat;
          }
        }
        .list-item:nth-child(3n) {
          margin-right: 0px;
          .line{
            display: none;
          }
        }
      }
      .row-3:last-child {
        .list-item:last-child {
          .line{
            display: none;
          }
        }
      }
      .row-3{
        position: relative;
        display: flex;
        flex-flow: row wrap;
        width: 100%;
        // height: 84px;
        .turn-icon{
          position: absolute;
          background: url('./img/ud-arrow.png') no-repeat;
          transform: scale(0.5,0.5);
          top: -36px;
          z-index: 20;
          width: 86px;
          height: 294px;
        }
        .turn-left{
          left: -58px;
          transform: scale(0.5,0.5) rotateY(180deg);
        }
        .turn-right{
          right: -50px;
        }
      }
      .list-item{
        // width: 30%;
        width: 164px;
        height: 84px;
        float: left;
        position: relative;
        margin-bottom: 50px;
        .line{
          transform: scale(0.5,0.5);
          background: url('./img/lr-arrow.png') no-repeat;
          position: absolute;
          width: 100px;
          height: 26px;
          z-index: 20;
          top: 31px;
          left: 132px;
        }
        .main:hover{
          z-index: 10;
          border: 2px solid #3297FF;
          box-shadow: 0 5px 10px 0 rgba(0,0,0,0.33);
          .title{
            color: #3297FF;
          }
          .main-info{
            height: 109px;
            .hidden{
              opacity: 1;
            }
          }
        }
        .main {
          position: relative;
          background: #fff;
          transition: all 0.5s;
          width: 100%;
          background: #fff;
          padding: 0px 12px;
          border: 2px solid rgba(0,0,0,0.20);
          box-shadow: 0 1px 2px 0 rgba(0,0,0,0.20);
          border-radius: 3px;
          .title{
            transition: all 0.5s;
            z-index: 3;
            width: 100%;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            font-weight: bold;
            border-bottom: 1px solid #eaeaea;
            margin-bottom: 5px;
          }
          .main-info{
            transition: all .5s;
            margin: 0 auto;
            height: 46px;
            .hidden {
              transition: all .5s;
              opacity: 0;
            }
            .main-li{
              margin-bottom: 5px;
              span{
                font-size: 12px;
                color: #333333;
                letter-spacing: 0.46px;
                display: inline-block;
              }
              .ml-pre{
                font-size: 13px;
                color: #A5A5A5;
                width: 50px;
                letter-spacing: 0.5px;
                text-align: right;
                margin-right: 5px;
              }
            }
          }
        }
        .start-flag{
          position: absolute;
          top: 33px;
          z-index: 10;
          width: 26px;
          height: 26px;
          border-radius: 50%;
          left: -12px;
        }
        .end-flag{
          position: absolute;
          top: 33px;
          z-index: 10;
          width: 26px;
          height: 26px;
          border-radius: 50%;
        }
        .end-left{
          left: -12px;
        }
        .end-right{
          left: 151px;
        }
      }
    }
  }
</style>
